<template>
  <div class="account-login mt-10">
    <Form ref="form">
      <!-- <FormItem label="用户名" prop="username"> -->
      <div class="filed-item">
        <Input label="用户名" type="text" v-model="baseForm.username"></Input>
      </div>
      <!-- </FormItem>
      <FormItem label="密码" prop="password">-->
      <div class="filed-item">
        <Input label="密码" type="password" v-model="baseForm.password"></Input>
      </div>
      <div class="filed-item">
        <Input ref="mobile" label="手机号" type="text" v-model="baseForm.mobile" />
      </div>
      <!--手机验证码 -->
      <!-- </FormItem>
      <FormItem label="手机验证码" prop="code">-->
      <Code :validFn="validateMobile" :mobile="baseForm.mobile" v-model="baseForm.smsCaptcha" />
      <!-- </FormItem> -->
      <!--图形验证码 -->
      <!-- </FormItem>
      <FormItem label="图形验证码" prop="code">-->
      <Capture ref="capture" v-model="baseForm.captcha" />
      <!-- </FormItem> -->
      <div class="set clear">
        <CheckBox v-model="baseForm.rememberMe">
          {{
          data
          }}
        </CheckBox>
        <div class="login-info">
          <span @click="toForget">忘记密码？</span>
        </div>
      </div>
      <div class="btn">
        <Button height="55" :loading="loading" @on-click="submit">登录</Button>
      </div>
    </Form>
  </div>
</template>
<script>
import Capture from "../send/Capture";
import Code from "../send/Code";
export default {
  components: {
    Capture,
    Code
  },
  name: "AccountLogin",
  props: {
    data: [Boolean, String]
  },
  data() {
    return {
      loading: false,
      baseForm: {
        username: "",
        password: "",
        captcha: "",
        mobile: "18305188635"
      }
    };
  },
  computed: {
    validRules() {
      return {};
    }
  },
  methods: {
    toForget() {},
    handleSubmit() {},
    submit() {
      console.log("submit");
    },
    validateMobile() {
      return this.$refs.mobile.validate();
    }
  },
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.account-login {
  .filed-item {
    margin: 10px 0
  }
  .set {
    position: relative
    font-size: 14px
    color: #6F798E
    line-height: 19px
    margin-top: 20px
    .login-info {
      float: right
      cursor: pointer
    }
  }
  .btn {
    margin-top: 24px
  }
}
</style>